<template>
  <div class="w">
    <div class="presentation">
        <h3>精彩呈现</h3>
        <div class="list">
            <ul>
                <li v-for="(item,index) in GoodList" :key="index">
                    <img :src="item.logo" alt="山水">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.time }}</p>
                    <p>{{ item.intro }}</p>
                </li>
            </ul>
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
    name:'MyPresentation',
    data() {
        return {
            GoodList:[
                {
                    logo:require('@/assets/images/shanshui.png'),
                    title:'山水',
                    time:'#',
                    intro:'"三板村"攻略'
                },
                {
                    logo:require('@/assets/images/shanshui.png'),
                    title:'山水',
                    time:'#',
                    intro:'"三板村"攻略'
                },
                {
                    logo:require('@/assets/images/shanshui.png'),
                    title:'山水',
                    time:'#',
                    intro:'"三板村"攻略'
                },
                {
                    logo:require('@/assets/images/shanshui.png'),
                    title:'山水',
                    time:'#',
                    intro:'"三板村"攻略'
                },
            ]
        }
    },
}
</script>

<style lang="less" scoped>
.w {
    width: 80%;
    margin: 10px auto;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.presentation{
    float: left;
    height: 180px;
    width: 100%;
    margin: 10px auto;
    background-color: pink;

    .list li{
        float: left;
        list-style: none;
        height: 150px;
        width: 24%;
        margin: 0 5px;
        background-color: skyblue;

        h5{
            float: left;
            width: 50%;
            height: 100px;
        }

        img{
            float: left;
            height: 100px;
            width: 48%;
        }

    }
}
</style>